<!--
  Copyright © 2015 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<!--
  I have passed level-1 vandame

  The spit follows like this,

  - Show info about the plugin (iframe)
  - OR: Show regular properties view
    - Show loading icon while fetching plugin config
    - OR: Don't show loading icon once fetch is complete
      - Show "No properties for plugin" message(if no property present)
      - OR: Show properties of the plugin
        - Show non-configured plugin properties as simple textboxes
        - OR: Show configured plugin properties (+ properties missed in plugin config json)


-->
<div ng-if="NodeConfigController.state.configfetched">
  <div class="bottompanel-header clearfix" ng-init="showinfo = false">
    <div class="pull-left">
      <h3>
        {{NodeConfigController.state.node.plugin.name}} Properties
        <small>{{ NodeConfigController.state.node.plugin.artifact.version }}</small>
        <small class="text-danger" ng-if="NodeConfigController.state.noConfigMessage && NodeConfigController.state.node.plugin.name !== 'Validator'">({{NodeConfigController.state.noConfigMessage}})</small>
      </h3>
      <p>{{NodeConfigController.state.node.description}}</p>
    </div>
  </div>

  <div class="bottompanel-body" ng-class="{'modal-sink': NodeConfigController.state.node.type === 'sink'}">
    <div ng-show="!showinfo">
      <div ng-if="NodeConfigController.state.configfetched">

        <div ng-if="NodeConfigController.state.noproperty !== 0">
          <div ng-if="NodeConfigController.state.noconfig" ng-include="'/assets/features/hydrator/templates/create/popovers/plugin-edit-noconfig-form.html'"></div>

          <div ng-if="(NodeConfigController.state.configfetched && !NodeConfigController.state.noconfig)">
            <div ng-include="'/assets/features/hydrator/templates/create/popovers/plugin-edit-config-form.html'"></div>
          </div>
        </div>

        <div ng-if="NodeConfigController.state.noproperty === 0">
          <div class="well well-lg">
            <p>No Properties for this Plugin.</p>
          </div>
        </div>
      </div>

      <div ng-if="!NodeConfigController.state.configfetched">
        <h3>
          <span class="fa fa-spinner fa-spin"></span>
          <span>Loading...</span>
        </h3>
      </div>

    </div>

  </div>
</div>
<div ng-if="!NodeConfigController.state.configfetched" class="loading-message">
  <h3>
    <small class="fa fa-spin fa-spinner"></small>
    Loading...
  </h3>
</div>
